<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-11-01 09:18:18
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-02-02 09:18:08
 * @FilePath: \vue-admin-template\src\components\formCollect\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 填写表单 -->
<template>
    <div class="equipmentMaintain">
        <div style="margin-bottom: 7px;">
            <img @click="clickBack" style="vertical-align: bottom;margin-right: 10px;cursor: pointer;"
                src="@/assets/icon/返回.png" alt="">
            <span class="normal-text" style="font-size: 19px;">{{ name }}保养-{{ edit ? '保养' : '详情' }}</span>
        </div>
        <div class="formItem-main">
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <div>
                    <div style="display: flex;">
                        <div style="margin-right: 10px;">
                            <img src="@/assets/icon/保养管理-端子.png" alt="">
                        </div>
                        <div style="display: flex;flex-direction: column;justify-content: space-between;padding: 7px 0px">
                            <div class="title">
                                {{ name == '设备'? item.name: name== '模具'?item.type: item.code  }} <img v-if="item.status" src="@/assets/icon/状态在用.png" alt=""
                                    style="margin-left: 5px;vertical-align: bottom;">
                                <img v-else src="@/assets/icon/状态在用.png" alt=""
                                    style="margin-left: 5px;vertical-align: bottom;">
                            </div>
                            <div style="color: #999999;font-size: 14px;" v-if="name == '设备'">
                                设备型号: {{ item.norm }} <span style="margin: 0px 10px;">出厂编号:{{ item.factoryNo
                                }}</span> 生产商:{{ item.manufacturer }}
                            </div>
                            <div style="color: #999999;font-size: 14px;" v-if="name == '模具'">
                                制造编号: {{ item.code }} <span style="margin: 0px 10px;">端子型号:{{ item.norm
                                }}</span> 生产商:{{ item.manufacturer }}
                            </div>
                            <div style="color: #999999;font-size: 14px;" v-if="name == '工装'">
                                归属项目: {{ item.type }} <span style="margin: 0px 10px;">产品型号:{{ item.model
                                }}</span> 使用部门:{{ item.userDepar }}
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <el-button v-if="edit" @click="clickSumbit" type="primary" class="noraml-btn">提交</el-button>
                </div>
            </div>

            <el-divider></el-divider>
            <section class="info-flex-box">
                <div class="title-box-name" style="margin-bottom:20px;">保养项目</div>
                <div style="margin-top: 20px;" v-if="!edit">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="保养时间">
                            <el-date-picker style="width: 100%;" value-format="yyyy-MM" v-model="times" type="month"
                                placeholder="选择月" :clearable="false">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="noraml-btn" @click="searchItem">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="noraml-btn" @click="seeAll">显示全部</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;gap: 20px;" v-if="edit">
                    <div v-for="(item, index) in deptList" :key="index" style="width: 48%;">
                        <div style="font-size: 16px;">
                            {{ item.name }}
                        </div>
                        <div style="margin-top: 10px;">
                            <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入内容"
                                v-model="item.itemContent">
                            </el-input>
                        </div>
                    </div>
                </div>
                <div  v-else ref="tableMain">
                    <div  style="overflow:auto;" :style="{ 'height': tableHeight + 'px' }">
                        <div v-for="(item, index) in tableList" :key="index">
                            <div class="time" style="display: flex;align-items: center;">
                                <div
                                    style="width: 10px;height: 10px;border-radius: 50%;background-color: #5CD8DA;margin-right: 10px;">
                                </div>
                                <div style="font-size: 18px;">
                                    {{ item.date }}
                                </div>
                                <div style="margin-left: 40px;">
                                    <el-button type="text" @click="clickEdit(item)"
                                        style="margin-left: 20px;">修改</el-button>
                                    <el-button type="text" v-if="item.canEdit" @click="clickSave(item)">提交</el-button>
                                    <el-button type="text" @click="clickDelete(item)">删除</el-button>
                                </div>
                            </div>
                            <div v-for="(i, ind) in item.data"
                                style="border-left: 3px solid #DFDFDF;margin-left: 3px;padding: 20px;padding-bottom: 0px;">
                                <div style="margin-bottom: 5px;">
                                    {{ i.itemName }}

                                </div>
                                <div
                                    style="padding: 20px;background-color: #F5F7FB;color: #434444;line-height: 1.5;border-radius: 5px;">

                                    <el-input v-if="item.canEdit" type="textarea" autosize placeholder="请输入内容"
                                        v-model="i.itemContent">
                                    </el-input>
                                    <span v-else> {{ i.itemContent }}</span>
                                </div>
                            </div>

                        </div>
                        <div style="text-align: center;" v-if="showPageNo">
                            <img src="@/assets/defaultLoad.png" alt="">
                        </div>
                    </div>
                </div>
            </section>
        </div>

    </div>
</template>
  
<script>


import Cookies from 'js-cookie';
export default {


    props: {
        item: {
            type: Object
        },
        firstEdit: {
            type: Boolean
        },
        name: {
            type: String
        }


    },
    data() {
        return {
            showPageNo: false,
            times: '',
            showSerInter: false,
            edit: false,
            textarea: '',
            fileList: [],
            tableList: [],
            headers: {},
            canEdit: true,
            formInline: {

            },
            deptList: [],

            dialogVisible: false,
            // 报价评审单 --详情0 ；报价评审单--重新填单 1；技术部长分配--详情 2  技术评审-详情 3
            canEdit: true,
            tableHeight: 300,
        }
    },
    mounted() {
        this.edit = this.firstEdit;

        this.times = this.getTime();
        // 上传请求头
        this.headers[Cookies.get('tokenNameEqu')] = Cookies.get('tokenValueEqu');
        // this.getDetail();
        if (this.edit) {
            switch (this.name) {
                case "设备":
                    this.$baseRequestGet('/sys/dict/getList/' + this.item.typeId, {}, 'get').then(res => {
                        this.deptList = res.data;
                        this.deptList.forEach(item => {
                            this.$set(item, 'itemContent', '')
                        })
                    })
                    break;
                case "模具":
                    this.$baseRequestGet('/sys/dict/getList/' + 2, {}, 'get').then(res => {
                        this.deptList = res.data;
                        this.deptList.forEach(item => {
                            this.$set(item, 'itemContent', '')
                        })
                    })
                    break;
                case "工装":
                this.$baseRequestGet('/sys/dict/getList/' + 3, {}, 'get').then(res => {
                        this.deptList = res.data;
                        this.deptList.forEach(item => {
                            this.$set(item, 'itemContent', '')
                        })
                    })
                    break;
                    break;
                default:
                    break;
            }

        } else {
            this.searchDetail();
        }
        this.$nextTick(res => {
            const tableHeight = document.documentElement.clientHeight;
            const topHeight = this.$refs.tableMain.getBoundingClientRect().top + 70;
            this.tableHeight = tableHeight - topHeight;
        })
    },
    computed: {
        listenHeight() {
            return this.$store.state.user.heightSize
        }
    },
    watch: {
        listenHeight(val) {
            const tableHeight = document.documentElement.clientHeight;
            const topHeight = this.$refs.tableMain.getBoundingClientRect().top + 70;
            this.tableHeight = tableHeight - topHeight;

        }
    },
    methods: {
        clickSave(row) {

            this.$baseRequest('/mold/service-record/revise', row.data, {}, 'put').then(res => {
                this.$message.success('提交成功');
                this.searchDetail();
            })
        },
        getTime() {
            let date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            return y + '-' + m
        },
        getDetail() {
            
            this.$baseRequestGetParams('/mold/device/getInfo', { id: this.item.id, genre: 0 }, {}, 'get').then(res => {
                this.formInline = res.data;
                this.formInline.type = this.item.type;
                this.formInline.sum = this.item.sum;

            })
        },
        seeAll() {
            this.times = '';
            this.searchDetail();
        },
        searchItem() {
            if (!this.times) {
                this.times = this.getTime();
            };
            this.searchDetail();
        },
        searchDetail() {
            this.$baseRequestGetParams('/mold/service-record/getList', { parentId: this.item.id, date: this.times }, {}, 'get').then(res => {
                this.tableList = res.data;
                this.showPageNo = this.tableList.length == 0 ? true : false;
                this.tableList.forEach(item => {
                    this.$set(item, 'canEdit', false);

                });

            })
        },
        clickEdit(row) {
            row.canEdit = !row.canEdit;
        },
        clickDelete(item) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = [];
                item.data.forEach(item => {
                    ids.push(item.id)
                })
                this.$baseRequest('/mold/service-record/delete', ids, {}, 'delete').then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.searchDetail();
                })
            })
        },
        load() { },
        clickBack() {
            this.$emit('closeformCollect')
        },
        /**
         * [clickSumbit 提交方法]
         *
         * @return  {[type]}  [return description]
         */
        clickSumbit() {
            let params = [];
            this.deptList.forEach(item => {
                params.push({
                    parentId: this.item.id,
                    itemName: item.name,
                    itemContent: item.itemContent

                })
            })
            this.$baseRequest('/mold/service-record/create', params, {}, 'post').then(res => {
                this.$message.success('提交成功')
                this.$emit('closeformCollect')
            })
        }

    }
}
</script>
<style>
.el-upload-list--picture {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.el-upload-list__item {
    width: 300px;
}
</style>
<style lang="scss" scoped>
.formItem-main {
    margin-top: 10px;
    padding: 40px 30px;
    border: 1px solid #E4E6EC;
    background-color: #fff;


    .title {
        font-size: 24px;
    }
}

.downFile-box {
    position: absolute;
    right: 20px;
    top: 35%;
    color: #5CD8DA;
    cursor: pointer;
}

.file-list-styles {
    background-color: #E0EFFC;
    border-radius: 5px;
    text-align: center;
    line-height: 70px;
    font-size: 18px;
}

.title-box-name {
    position: relative;
    margin-left: 10px;
    font-size: 18px;
}

.title-box-name::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0px;
    width: 4px;
    height: 19px;
    border-radius: 2px;
    background-color: #5CD8DA;

}

.info-flex-box {
    .info-flex-box-item {
        width: 100%;
        background-color: #F5F7FB;
        margin-top: 10px;
        padding: 15px;
        border-radius: 5px;
        color: #6C6D6E;
        line-height: 1.5;
        font-size: 15px;

    }
}

.item-info {
    width: 20%;
    margin-bottom: 20px;
    min-width: 200px;

    span {
        margin-left: 10px;
    }
}
</style>
  